<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<title>点餐</title>
	<link rel="stylesheet" href="static/css/style.css">
	<style type="text/css">
		.categoryName{
			background-color: rgba(183, 183, 183, 0.18);
			font-size: 20px;
			color: #000;
		}
		.categoryName:hover{
			background-color: rgba(191, 236, 226, 0.92);
		}
	</style>
</head>
<body style="background-image: url(static/images/food2.png);background-size: 100%,100% ; background-position: center,center; background-repeat: no-repeat">
<div class="header">
	<div class="content-wrapper">
		<div class="avatar">
			<img width="64" height="64" src="static/images/food.png">
		</div>
		<div class="content">
			<div class="title">
				<span class="brand"></span>
				<span class="name">点餐店面</span>
			</div>
			<div class="description">
				做美食就像做人，必须真材实食料，还要去杂选优。精心烹饪才会成为美味佳肴。
			</div>
			<div class="support">
				<span class="icon decrease"></span>
				<span class="text"></span>
			</div>
		</div>
	</div>
	<div class="bulletin-wrapper">
		<span class="bulletin-title"></span><span class="bulletin-text">本店所有产品均为下单后现做请及时饮用，如商品出现质量问题无条件接收退换货，客服热线：不知道</span>
		<i class="icon-keyboard_arrow_right"></i>
	</div>
	<div class="background">
		<img width="100%" height="100%" src="static/images/food.png">
	</div>
</div>
<div class="main" style="background-color: rgba(236,236,236,0)" >
	<div class="left-menu" style="background-color: rgba(206,204,204,0); padding-bottom: 2.1%; " id="left">
		<c:forEach items="${categoryList}" var="categoryList" varStatus="status">
			<ul >
				<li style="background-color: rgba(221,243,200,0.5);font-weight:530 "><span class="categoryName"  >${categoryList.categoryName}</span></li>
			</ul>
		</c:forEach>

	</div>

	<div class="con" >
			<c:forEach items="${categoryList}" var="categoryList" varStatus="status">
			<div class="right-con con-active" style="display: none;background-color: rgba(164,160,160,0);">
			<c:forEach items="${list}" var="list" varStatus="status">
			<c:if test="${(list.categoryName eq categoryList.categoryName)}">
			<ul >
				<li class="" style="background-color: rgba(190,255,250,0.49);height: 25%;">
					<div class="menu-img"><img src="${list.cuisinePhoto}" width="55" height="55"></div>
					<div class="menu-txt">
						<h4 data-icon="00" style="font-size: 20px;color: #2F4056;font-weight: 530">${list.cuisineName}</h4>
						<p class="list1" style="font-size: 16px;color: #2F4056;font-weight: 530">${list.categoryName}</p>
						<p class="list2" style="font-size: 14px;font-weight: 530">
							<b>￥</b><b>${list.cuisinePrice}</b>
						</p>

						<div class="btn">
							<div style="display: flex;">
								<form action="${pageContext.request.contextPath}/user/UserCartDelete">
									<input type="text" name="cuisineId" value="${list.cuisineId}" hidden>
									<button type="submit">
										<img src="static/images/minus.png" width="20px" height="20px" >
									</button>
								</form>
								<c:forEach items="${cartList}" var="cartList" varStatus="status">
									<c:if test="${(list.cuisineName eq cartList.cuisineName)}">
										<span style="color:rgba(3,22,145,0.98); font-size: 24px">${cartList.number}</span>
									</c:if>
								</c:forEach>
								<form action="${pageContext.request.contextPath}/user/userCartAdd" method="post ">
									<input type="text" name="cuisineId" value="${list.cuisineId}" hidden>
									<button type="submit">
										<img src="static/images/add.png" width="20px" height="20px" >
									</button>
								</form>
							</div>

						</div>
					</div>
				</li>
			</ul>
		</c:if>
		</c:forEach>
		</div>
		</c:forEach>
	</div>

	<div class="up1"></div>
	<div class="shopcart-list fold-transition" style="background-color: rgba(255,255,255,0.5);font-size: 18px;color: #2F4056">
	<div class="list-header" style="background-color: rgba(255,255,255,0.64)">
		<h1 class="title" style="font-size: 18px;color: #2F4056">购物车</h1>
		<span class="empty">
			<form action="${pageContext.request.contextPath}/user/userCartClear" method="post">
			<button type="submit" style="font-size: 18px;color: #2F4056">清空</button>
			</form>
		</span>
	</div>

	<c:forEach items="${cartList}" var="cartList" varStatus="status">
		<ul>
			<li class="food">
				<div >
					<span class="accountName">${cartList.cuisineName}</span>
					<span>¥</span>
					<span class="accountPrice">${cartList.cuisinePrice}</span>
				</div>
				<div style="display: flex">
					<form action="${pageContext.request.contextPath}/user/UserCartDelete" method="post">
						<button type="submit">
							<input type="text" name="cartId" value="${cartList.cartId}" hidden>
							<img src="static/images/minus.png" width="18px" height="18px" >
						</button>
					</form>
					<span style="font-size: 20px">${cartList.number}</span>
					<form action="${pageContext.request.contextPath}/user/userCartAdd" method="post ">
						<input type="text" name="cuisineId" value="${cartList.cuisineId}" hidden>
						<button type="submit">
							<img src="static/images/add.png" width="18px" height="18px" >
						</button>
					</form>
				</div>
				<div style="text-align: left">
					<span>总共${cartList.cuisinePrice * cartList.number}（元）</span>
				</div>
			</li>
		</ul>
	</c:forEach>

	</div>
	<div class="footer" style="background-color: rgba(255,255,255,0.64);font-size: 18px;color: #2F4056">
		<div class="left">
			<a href="javaScript:">购物车</a>
		</div>
		<div class="right">
			<a class="xhlbtn  disable "  href="${pageContext.request.contextPath}/user/toPay" style="font-size: 18px;color: #1969d0">去结算</a>
		</div>
	</div>
</div>
<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/add.js"></script>
<script type="text/javascript" src="static/js/vue.min.js"></script>

</body>
</html>
